<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="f1">
					<view class="l">
						<image :src="item.logo" mode="" class="avatar"></image>
						
						<view class="cite">
							<text class="i">{{item.name}}</text>
							<text class="u">{{item.add_time}}</text>
						</view>
					</view>
					
					<view class="l">
						<view class="btn_copy" @click="onCopyClick(item.content)">
							<text>复制文案</text>
						</view>
						
						<view class="btn_share" @click="onShareClick(item)">
							<image src="../../../static/fanli/14.png" mode="" class="icon"></image>
							<text>{{item.share_count}}</text>
						</view>
					</view>
				</view>
				
				<view class="f2">
					<text>{{item.content}}</text>
				</view>
				
				<image :src="item.good.itempic" mode="widthFix" class="pic" @click="onGoodClick(item.good)"></image>
				
				<view class="f3">
					<view class="price">
						<text class="i">￥</text>
						<text>{{item.good.itemfee_final}}</text>
						<text class="u">¥{{item.good.itemfee_coupon}}</text>
					</view>
					
					<view class="prize">
						<text>升级赚{{item.good.commission_gift_card_share}}礼品券</text>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="loadingMore ? 'loading' : ''"></uni-load-more>
		
		<view class="popup_share" v-if="showSharePopup">
			<view class="shadow"></view>
			
			<image :src="sharePic" mode="widthFix" class="pic"></image>
			
			<view class="bottom">
				<button class="btn" open-type="share">
					<image src="../../../static/fanli/314.png" mode="" class="icon"></image>
					<text>分享好友</text>
				</button>
				
				<view class="btn">
					<image src="../../../static/fanli/315.png" mode="" class="icon" @click="onSaveClick"></image>
					<text>保存图片</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { runGetCommunity, runGetCommunityShare } from '@/module/api'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"

	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		components: {uniLoadMore},
		data() {
			return {
				loaded: false,
				page: 1,
				loadingMore: true,
				isEmpty: false,
				list: [],
				showSharePopup: false,
				sharePic: null,
				shareItem: null,
			};
		},
		
		computed: {
			shareAppMessage () {
				return Object.assign(this.$store.state.shareAppMessage, {
					imageUrl: this.sharePic || "",
					title: this.shareItem ? this.shareItem.title || "" : "",
					path: this.shareItem ? "/pages/index/index?scene=" + encodeURIComponent("id="+this.shareItem.itemid+"&type="+this.shareItem.itemtype+"&v=hgd") : ""
				})
			},
			
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		onLoad(params) {
			let _t = this
			this.getPageData()
		},
		
		onReachBottom () {
			if(this.loadingMore) return false
			if(this.isEmpty) return false
			if(!this.loaded) return false
			
			this.page++
			this.loadingMore = true
			this.getPageData()
		},
		
		methods:{
			onSaveClick () {
				console.log("保存图片")
				let _t = this
				let authSuccess = () => {
					let imgSrc = _t.sharePic
					uni.downloadFile({
						url: imgSrc,
						success: function (res) {
							console.log(res);
							//图片保存到本地
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function (data) {
									uni.showToast({
										title: '保存成功',
										icon: 'success',
										duration: 2000
									})
								},
								fail: function (err) {
									console.log(err);
									if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
										console.log("当初用户拒绝，再次发起授权")
										uni.openSetting({
											success(settingdata) {
												console.log(settingdata)
												if (settingdata.authSetting['scope.writePhotosAlbum']) {
													console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
												} else {
													console.log('获取权限失败，给出不给权限就无法正常使用的提示')
												}
											}
										})
									}
								}
							})
						}
					})
				}
				
				uni.getSetting({
					success(res) {
						console.log(res)
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope:'scope.writePhotosAlbum',
								success () {
									authSuccess()
								}
							})
						}else{
							authSuccess()
						}
					}
				})
			},
			
			onShareClick (item) {
				let _t = this
				
				uni.showLoading({
					mask: true,
					title: '请求中...'
				})
				
				runGetCommunityShare({
					params: {
						sid: item.id,
						uid: this.userInfo.id
					},
					success: res => {
						uni.hideLoading()
						_t.shareItem = item.good
						_t.sharePic = res.data.sharePic
						_t.showSharePopup = true
					},
					fail: res => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					},
					error: () => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "系统繁忙，请稍候再试"
						})
					}
				})
			},
			
			onGoodClick (item){
				uni.navigateTo({
					url: "/pages/home/good-detail/good-detail?id=" + item.itemid + "&type=" + item.itemtype
				})
			},
			
			onCopyClick (str) {
				uni.setClipboardData({
					data: str,
					success: () => {
						uni.showToast({
							icon: "none",
							title: "复制成功"
						})
					}
				})
			},
			
			getPageData () {
				let _t = this
				runGetCommunity({
					params: {
						uid: this.userInfo.id,
						page: this.page
					},
					success: res => {
						let list = _t.page == 1 ? [] : _t.list
						list = list.concat(res.data)
						_t.list = list
						_t.isEmpty = res.data < 10
						_t.loadingMore = false
						_t.loaded = true
					},
					fail: res => {
						_t.isEmpty = true
						_t.loadingMore = false
						_t.loaded = true
					},
					error: () => {
						_t.isEmpty = true
						_t.loadingMore = false
						_t.loaded = true
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F2F2F2;
	}
</style>

<style lang="less">
	.list{
		padding: 20px 30px 0;
		width: 100%;
		position: relative;
		overflow-x: hidden;
		box-sizing: border-box;
		
		&::before {  
			content: '';  
			width: 100%;  
			height: 92px;  
			position: absolute;  
			left: 0; 
			top: 0;  
			z-index: -1; 
			background: linear-gradient(180deg,rgba(255,87,87,1) 0%,rgba(255,40,61,1) 100%);
		}
		
		&::after {  
			content: '';  
			width: 110%;  
			height: 80px;  
			position: absolute;  
			left: -5%; 
			top: 92px;  
			z-index: -1; 
			border-radius: 0 0 50% 50%;  
			background: rgba(255,40,61,1);
		}
		
		.item{
			margin-bottom: 30px;
			border-radius: 12px;
			background-color: #FFFFFF;
			padding: 30px;
			
			.f1{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				
				.l{
					flex-direction: row;
					display: flex;
					align-items: center;
				}
				
				.avatar{
					margin-right: 20px;
					width: 88px;
					height: 88px;
					border-radius: 44px;
				}
				
				.cite{
					flex-direction: column;
					display: flex;
					
					.i{
						font-size: 30px;
						color: #333333;
					}
					
					.u{
						font-size: 24px;
						color: #999;
						padding-top: 6px;
					}
				}
				
				.btn_copy{
					width: 108px;
					height: 38px;
					border-radius: 30px;
					border: 1px solid #FF2D5E;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 20px;
					
					text{
						font-size: 22px;
						color: #FF2D5E;
					}
				}
				
				.btn_share{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 38px;
					border-radius: 30px;
					border: 1px solid #333;
					padding: 0 12px;
					
					.icon{
						width: 30px;
						height: 30px;
						margin-right: 8px;
					}
					
					text{
						font-size: 22px;
						color: #333;
					}
				}
			}
			
			.f2{
				margin-top: 24px;
				
				text{
					font-size: 28px;
					color: #666;
				}
			}
			
			.pic{
				width: 100%;
				margin-top: 30px;
			}
			
			.f3{
				margin-top: 20px;
				height: 56px;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				
				.price{
					display: flex;
					flex-direction: row;
					align-items: center;
					
					text{
						color: #FF2D5E;
						font-size: 40px;
					}
					
					.i{
						font-size: 28px;
						padding-top: 8px;
					}
					
					.u{
						font-size: 28px;
						padding-top: 8px;
						padding-left: 8px;
						color: #999999;
						text-decoration: line-through;
					}
				}
				
				.prize{
					background-color: #FF2D5E;
					padding: 0 16px;
					border-radius: 20px;
					height: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					
					text{
						color: #FFFFFF;
						font-size: 28px;
					}
				}
			}
		}
	}
	
	.popup_share{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		
		.shadow{
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
			background-color: #000;
			opacity: 0.75;
		}
		
		.pic{
			width: 60%;
			position: absolute;
			top: 40px;
			left: 20%;
		}
		
		.bottom{
			padding-top: 40px;
			border-radius: 24px;
			height: 206px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			background-color: #fff;
			position: absolute;
			bottom: 30px;
			left: 30px;
			right: 30px;
			
			.btn{
				width: 285px;
				display: flex;
				flex-direction: column;
				align-items: center;
				background: #FFFFFF;
				
				.icon{
					width: 120px;
					height: 120px;
					margin-bottom: 16px;
				}
				
				text{
					font-size: 28px;
					color: #333333;
				}
			}
		}
	}
	
	
</style>
